<template>
  <div>
    <header-bar></header-bar>
    <loading v-if="isLoading"></loading>
    <div class="movie-detail">
      <top-dowd-load></top-dowd-load>
      <div class="content">
        <h1>{{movie.title}}</h1>
        <!--头部信息-->
        <div class="text">
          <div class="left">
            <rating v-if="movie.rating" :rating="movie.rating"></rating>
            <span>{{movie.ratings_count}}人评价</span>
            <p>
              <span>{{movie.year}}/</span>
              <span v-for="(n,i) in movie.genres" :key="i">{{n}}/</span>
              <span>{{directors.name}}(导演)/</span>
              <span v-for="cast in casts" :key="cast.id">{{cast.name}}/</span>
              <!--<span v-for="(contry,k) in movie.countries" :key="k">{{contry}}</span>-->
              <span>{{contry}}</span>
            </p>
            <a href="#">用App查看影人资料</a>
          </div>
          <div class="right">
            <img :src="imgs.small" alt="" width="100" height="140">
          </div>
        </div>
        <!--看过-->
        <div class="login">
          <router-link to="/">想看</router-link>
          <router-link to="/">看过</router-link>
        </div>
        <!--简介详情-->
        <div class="detail">
          <span> {{movie.title}}的剧情简介</span>
          <div class="txt">
            <p>{{movie.summary}}</p>
          </div>
          <div class="actor">
            <span>影人</span>
            <ul>
              <li v-for="c in casts" :key="c.id">
                <router-link :to="{name:'ActorView',params:{acid:c.id}}">
                  <div class="actorImg"><img :src="'https://images.weserv.nl/?url='+c.avatars.small" alt="演员" height="140" width="100"></div>
                  <p>{{c.name}}</p>
                  <span>演员</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <!--评论部分-->
        <!--<div class="related">-->
          <!--<p>{{movie.title}}的短评</p>-->
          <!--<div class="user">-->
            <!--<img src="../../assets/img/txImg.png" alt="头像" height="40">-->
            <!--<rating v-if="movie.rating" :rating="movie.rating"></rating>-->
          <!--</div>-->
        <!--</div>-->
        <div class="ad">
          <img src="../../assets/img/ad.jpg" alt="" width="100%" height="96">
          <span>广告</span>
        </div>
      </div>
    </div>
    <down-load-app></down-load-app>
  </div>
</template>

<script>
  import HeaderBar from '../HeaderBar'
  import TopDowdLoad from '../../public/TopDowdLoad'
  import Rating from '../../public/Rating'
  import Loading from '../../public/Loading'
  import DownLoadApp from '../../public/DownLoadApp'

  export default {
    name: 'Movie',
    data() {
      return {
        movie: {},
        isLoading: true,
        imgs: {},
        casts: [],
        directors: [],
        contry: [],
        comment:[]
      }
    },
    components: {
      HeaderBar,
      TopDowdLoad,
      Rating,
      Loading,
      DownLoadApp
    },
    created() {
      const id = this.$route.params.id
      this.axios.get('api/movie/subject/' + id)
        .then((res) => {
          this.isLoading = false
          let movie = res.data
          let imgs = movie.images
          let casts = movie.casts
          let directors = movie.directors[0]
          let contry = movie.countries[0]
          // this.$set(casts,casts)
          this.casts = casts
          this.imgs = imgs
          this.movie = movie
          this.directors = directors
          this.contry = contry
          // console.log(movie)
        })
        .catch((err) => console.log(err))
      // this.axios.get('/comement/'+id+'&parent=movie&apikey=GDAHhEue3IG14xZVS4PBhQ4KkescpJJr3Nm3HJtRb4xx7md0FdmwfCaoYqua0qn3')
      //   .then((res)=>{
      //     let comment = res.data.data
      //     this.comment = comment
      //     console.log(comment)
      //   })
      //   .catch((err)=>console.log(err))
    }
  }
</script>

<style lang="scss">
  .movie-detail {
    margin-top: 47px;
  }

  .content {
    padding: 15px;
    span {
      color: #aaa;
    }
    h1 {
      margin: 15px 0 5px;
      font-size: 24px;
      line-height: 32px;
      word-break: break-all;
    }
    .rating {
      display: inline-block;
      margin-right: 20px;
    }
    .star-full {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url();
      background-size: cover;
    }

    .star-gray {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url();
      background-size: cover;
    }

    .star-half {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-image: url();
      background-size: cover;
    }
    .average {
      font-size: 15px;
      color: #494949;
    }
    .text {
      display: flex;
      height: 140px;
      margin-bottom: 35px;
      .left {
        flex: 2;
        p {
          margin-top: 15px;
          padding-right: 24px;
          font-size: 14px;
          line-height: 1.6;
          span {
            color: #494949;
          }
        }
        a {
          display: block;
          margin-top: 10px;
          line-height: 1;
          font-size: 14px;
          color: #42bd56;
        }
      }
      .right {
        flex: 1;
        padding: 5px 0px;
      }
    }
    .login {
      display: flex;
      margin-bottom: 20px;
      a {
        display: block;
        height: 30px;
        margin-right: 10px;
        line-height: 30px;
        font-size: 15px;
        text-align: center;
        color: #ffb712;
        border: 1px solid #ffb712;
        border-radius: 3px;
        -ms-flex: 1;
        flex: 1;
      }
    }
    .txt {
      margin: 20px 0;
      p {
        font-size: 15px;
        color: #494949;
        line-height: 20px;
      }
    }
    .actor {
      ul {
        height: 220px;
        margin-top: 20px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        li {
          margin-right: 10px;
          display: inline-block;
          text-align: center;
          p {
            font-size: 14px;
            line-height: 1.5;
            white-space: normal;
            text-align: center;
            color: #494949;
            margin: 6px 0;
          }
          span {
          }
        }
      }
    }
    .related{
      p{
        color: #aaa;
        font-size: 15px;
      }
    }
    .ad{
      line-height: 96px;
      height: 96px;
      position: relative;
      span{
        position: absolute;
        bottom: 0;
        right: 0;
        display: inline-block;
        width: 34px;
        height: 23px;
        padding: 2px;
        line-height: 23px;
        text-align: center;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
</style>
